class Swiper {
    constructor(ele, options) {
        this.con = this.getDom(ele);
        this.wrapper = this.getDom('.swiper-wrapper', this.con);
        this.slide = Array.from(this.wrapper.children);
        console.log(this.slide)
        let def = this.def = {
            autoplay: false,
            direction: 'horizontal',
            init: 0
        }
        this.options = Object.assign({}, def, options);
        this.init()
    }
    init() {
        this.WrapperStyle();
        this.autoPlays();
        this.clickBtn();
        this.pagination();
    }

    //设置wrapper的宽度
    WrapperStyle() {
        this.width = this.con.offsetWidth;
        this.height = this.con.offsetHeight;
        this.length = this.slide.length;
        if (this.options.direction === 'horizontal') {
            this.wrapper.style.width = `${this.width*this.length}px`;
            this.wrapper.style.height = `${this.height}px`;
            this.slide.forEach((item) => {
                item.style.float = 'left'
            })
        } else {
            this.wrapper.style.width = `${this.width}px`;
            this.wrapper.style.height = `${this.height*this.length}px`;
            this.slide.forEach((item) => {
                item.style.float = 'none'
            })
        }
        this.slide.forEach((item) => {
            item.style.width = `${this.width}px`
            item.style.height = `${this.height}px`
        })
    }

    //自动轮播
    autoPlays() {
        this.con.onmouseenter = () => {
            clearInterval(timer)
        }
        this.con.onmouseleave = () => {
            this.move();
        }
        let timer = setInterval(() => {
            this.move();
        }, this.options.autoplay);
    }

    move() {
        this.options.init++;
        this.options.init = this.options.init > this.length - 1 ? 0 : this.options.init;
        this.autoPlay();
        console.log(this.options.init)
    }
    autoPlay() {
        let styles = this.options.direction === 'horizontal' ? 'marginLeft' : 'marginTop';
        let styleWH = this.options.direction === 'horizontal' ? 'width' : 'height';
        console.log(this.options.init * this[styleWH]);
        this.wrapper.style[styles] = `-${this.options.init*this[styleWH]}px`;
        this.wrapper.style.transition = "all .3s"
    }

    //点击上一个/下一个
    clickBtn() {
        let { prevEl, nextEl } = this.options.navigation;
        let prevBtn = this.getDom(prevEl, this.con);
        let nextBtn = this.getDom(nextEl, this.con);
        prevBtn.onclick = () => {
            this.options.init--;
            this.options.init = this.options.init < 0 ? this.length - 1 : this.options.init;
            this.autoPlay();
            console.log(this.options.init)
        }
        nextBtn.onclick = this.move.bind(this);
    }

    //点击pagination
    pagination() {
        let pagination = this.getDom('.swiper-pagination', this.con);
        for (let i = 0; i < this.length; i++) {
            let li = document.createElement('li');
            pagination.appendChild(li);
            if (i == 0) {
                li.classList.add('active')
            }
        }
    }

    //获取元素
    getDom(el, parent) {
        return typeof el === 'object' ? el : (parent || document).querySelector(el)
    }
}